<!DOCTYPE html>
<html lang="en">
	<head>
		<title>vr</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<link rel="stylesheet" href="css/iconfont.css">
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		.btn_ground{
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: flex-end;
			color: #ffffff;
			font-size: 14px;
			padding-bottom: 50px	;
		}
		.btn_ground > span{
			margin:10px 15px;
		}
		#container{
			width: 100vw;
			height: 100vh;
			overflow: hidden;
		}
		.total{
			border: 1px solid #ffffff;
			border-radius: 50px;
			padding: 0 8px;
		}
		.flex-d{
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	</style>
	<body>

		<div id="container"></div>

		<div class="btn_ground">
			<span style="font-size: 31px" class="closebtn iconfont icon-cuowuguanbi1"></span>
			<span id="stopbtn" style="font-size: 30px;display: none;" class="iconfont icon-zanting1"></span>
			<span id="gobtn" style="font-size: 30px" class="iconfont icon-bofang2"></span>
			<span class="total"><span id="newtime"></span>/<span id="totaltime"></span></span>
<!--			<span style="display: flex;flex-direction: row;align-items: center;justify-content: center;">-->
<!--				<div class="flex-d" style="transform: rotate(180deg);margin-right: 10px">-->
<!--					<span style="font-size: 30px;" class="ht iconfont icon-iconset0485"></span>-->
<!--				</div>-->
<!--				<div class="flex-d">-->
<!--					<span style="font-size: 30px;" class="kj iconfont icon-iconset0485"></span>-->
<!--				</div>-->
<!--			</span>-->
		</div>

		<video id="video" loop muted crossOrigin="anonymous" playsinline webkit-playsinline x5-video-player-type="h5-page"
		 style="display:none">
			<source src="video/demo6.mp4">
		</video>
<!--		<div id="videoplay" style="position: fixed;top:50%;width:100%;text-align: center;color: #FFF;">开始播放</div>-->
		<script src="js/three.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/DeviceOrientationControls.js" type="text/javascript" charset="utf-8"></script>
		<script type="module">
			var camera, scene, renderer,controls;
            var isiPhone=navigator.userAgent.indexOf("iPhone") > 0;
			var isUserInteracting = false,
				lon = 0, lat = 0,
				phi = 0, theta = 0,
				distance = 50,
				onPointerDownPointerX = 0,
				onPointerDownPointerY = 0,
				onPointerDownLon = 0,
				onPointerDownLat = 0;

			init();
			animate();
		

				var container, mesh;

				container = document.getElementById( 'container' );

				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
				camera.target = new THREE.Vector3( 0, 0, 0 );
                controls=new THREE.DeviceOrientationControls(camera);
				scene = new THREE.Scene();

			  function initCube(){var texturePainting = new THREE.TextureLoader().load( './images/img2.png' );
            var materialPainting = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texturePainting } );

            mesh = new THREE.Mesh(
                new THREE.SphereGeometry( 100, 100, 100 ),
                materialPainting
                // new THREE.MeshNormalMaterial( { flatShading: true } )
            );
			mesh.position.z = 1600;
           
            scene.add( mesh );


				renderer = new THREE.WebGLRenderer();
				// renderer = new THREE.WebGLRenderer({ alpha: true });
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				container.appendChild( renderer.domElement );

				var startX, startY, moveEndX, moveEndY, moveEndX2, X, X2, Y;
				           document.addEventListener("touchstart", function (e) {
				                e.preventDefault();
				                startX = e.changedTouches[0].pageX,
				                    startY = e.changedTouches[0].pageY;
				            });
				           document.addEventListener("touchmove", function (e) {
				                e.preventDefault();
				                moveEndX2 = e.changedTouches[0].pageX;
				                if (moveEndX != null) {
				                    X2 = moveEndX2 - moveEndX;
				                }
				                moveEndX = e.changedTouches[0].pageX,
				                    moveEndY = e.changedTouches[0].pageY,
				                    X = moveEndX - startX,
				                    Y = moveEndY - startY;

				                if (Math.abs(X) > Math.abs(Y) && (X2 > 0)) {

				                    //向右
				                    mesh.rotation.y -= 0.03;

				                }
				                else if (Math.abs(X) > Math.abs(Y) && (X2 < 0)) {
				                    //向左
				                    mesh.rotation.y += 0.03;
				                }
				                else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
				                    //向下
				                }
				                else if (Math.abs(Y) > Math.abs(X) && Y < -0) {
				                    //向上
				                }
				                else {
				                    //未移动
				                }
				            });
				           document.addEventListener("touchend", function (e) {
				                moveEndX = e.changedTouches[0].pageX,
				                    moveEndY = e.changedTouches[0].pageY,
				                    X = moveEndX - startX,
				                    Y = moveEndY - startY;
				                if (Math.abs(Y) > Math.abs(X) && Y < -0) {
				                }
				                if (Math.abs(Y) > Math.abs(X) && Y > 0) {

				                }
				                if (X > 0) {
				                }
				                if (X < 0) {
				                }

				            });
				//

				window.addEventListener( 'resize', onWindowResize, false );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}
			function animate() {

				requestAnimationFrame( animate );
				update();

			}

			function update() {
                controls.update();
				renderer.render( scene, camera );

			}

			setTimeout(function () {
				$("#totaltime").text(parseInt(video.duration)+'s')
			},1000)
			setInterval(function () {
				$("#newtime").text(parseInt(video.currentTime)+'s')
			},1000)
			$(".kj").click(function () {
				video.currentTime+=10
			})
			$(".ht").click(function () {
				if(video.currentTime>10){
					video.currentTime-=10
				}
			})

		</script>
	</body>
</html>

